<!--
 * @Author: licongwei
 * @Date: 2022-03-07 17:23:15
 * @FileDescription: 超市商品
-->
<template>
  <div class="P2">
    <div class="top">
      <swiper-top @change="onChoice"></swiper-top>
    </div>
    <div class="bottom">
      <div class="left">
        <left-top :parameters="parameters" @change="leftItemChange"></left-top>
        <left-Lower
          :goodsId="goods.goodsId"
          :parameters="parameters"
          @change="leftItemChange"
        ></left-Lower>
      </div>
      <div class="center">
        <c-map
          @change="mapChange"
          :goods="goods"
          :adNames="adName"
          :adCodes="parameters.adcode"
        ></c-map>
      </div>
      <div class="right">
        <right-db
          class="right-item"
          @handInputClick="handInputClick"
          :tableData="dbData"
          :classId="parameters.classId"
        />
      </div>
    </div>
    <div class="table" v-if="isTbaleShow">
      <right-table
        class="table-item"
        :tableData="tableData"
        @handTableClose="handTableClose"
      ></right-table>
    </div>
  </div>
</template>
<script lang="ts">
import leftTop from './cpns/leftTop.vue'
import leftLower from './cpns/leftLower.vue'
import rightDb from './cpns/rightDb.vue'
import rightTable from './cpns/rightTable.vue'
import cMap from './cpns/map.vue'
import swiperTop from './cpns/swiperTop.vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'P2',
  components: {
    leftTop,
    leftLower,
    rightDb,
    rightTable,
    cMap,
    swiperTop
  },
  setup() {
    const isTbaleShow = ref(false)
    const tableData = ref({})
    const dbData = ref({})
    const adName = ref('新疆')
    const parameters = ref({
      adcode: '650000',
      classId: ''
    })

    const goods = ref({
      goodsName: '',
      goodsId: ''
    })
    const handTableClose = (val: any) => {
      if (typeof val == 'object') {
        dbData.value = val
      }
      isTbaleShow.value = false
    }
    const handInputClick = (obj: any) => {
      tableData.value = obj
      isTbaleShow.value = true
    }
    const mapChange = (code: any, name: string) => {
      parameters.value.adcode = code
      adName.value = name
    }
    const onChoice = (classId: any) => {
      parameters.value.classId = classId && classId !== '' ? classId : 'null'
    }
    const leftItemChange = (name: string, id: string) => {
      goods.value.goodsName = name
      goods.value.goodsId = id
    }
    return {
      isTbaleShow,
      tableData,
      dbData,
      parameters,
      goods,
      adName,
      handInputClick,
      handTableClose,
      mapChange,
      leftItemChange,
      onChoice
    }
  }
})
</script>
<style lang="less" scoped>
.P2 {
  .top {
    width: 100%;
    height: 125px;
  }
  .bottom {
    display: flex;
    width: 100%;
    height: calc(100% - 125px);
    .left {
      // flex: 0 0 465px;
      width: 465px;
    }
    .center {
      width: calc(100% - 1200px);
      // flex: 1;
    }
    .right {
      height: 100%;
      width: 735px;
      display: flex;
      // align-items: flex-end;
      // .right-item {
      //   height: 762px;
      //   width: 100%;
      // }
      // flex: 0 0 830px;
    }
  }
  .table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 65%;
    height: 700px;
    .table-item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
